<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>大房家族梳理图</title>
<style>
  body{
    background: white;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 3em;
  }
  #button {
    position: relative;
    display: inline-block;
    padding: 20px 40px;
    border-radius: 15px;
    outline: none;
    border: none;
    background: #1d9650;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    font-size: 1em;
  }
  .picBox{
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 25vh;
  }
  .picBox2{
    align-items: center;
    display: flex;
    justify-content: center;

  }
  .btnBox{
    padding: 20px 0 0 0;
    box-sizing: border-box;
    margin-bottom: 1em;
  }

  #sp-circle {
    width: 10vw;
    height: 10vw;
    border: 4px rgba(0, 0, 0, 0.25) solid;
    border-top: 4px black solid;
    border-radius: 50%;
    transform: translateY(-100px);
    -webkit-animation: spCircRot 1.2s infinite linear;
    animation: spCircRot 1.2s infinite linear;
    display: none;
  }

  @-webkit-keyframes spCircRot {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(359deg); }
  }
  @keyframes spCircRot {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
  }
</style>
</head>
<body>
<h3>大房十二世人员图</h3>
<div class="picBox2">
  <img src="gai.jpg" alt="">

</div>

<h3>大房全体人员图</h3>
<div class="btnBox">
  <input type="button" id="button" value="点击更换高清全体人员图">
</div>

<div class="picBox">
  <img id="img" src="pic.png" alt="">
  <div id="sp-circle"></div>
</div>

<script>
  let btn = document.getElementById('button');
  let img = document.getElementById('img');
  let sp = document.getElementById('sp-circle');
  let a = true;
  btn.onclick  = () => {
    if(a){
      img.src = '';
      sp.style.display = 'block';
      const newImg = new Image();
      newImg.src = 'pic.svg';
      newImg.onerror = () => {
        sp.style.display = 'none';
        newImg.src = '6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg';
      };
      newImg.onload = () => {
        sp.style.display = 'none';
        img.src = newImg.src
      };
      a = false
    }else {
      alert('请不要重复点击')
    }

  }


</script>
</body>
</html>
